import React from "react";
import {atom, selector, useRecoilValue} from "recoil";
import styles from "./testb.module.css";
import {stateFromA} from "../../recoil/demo";
import {stateFromC} from "../testC";

const countStateFromC = selector({
    key: "countStateFromCxx",
    get: ({get}) => {
        const valueStateFromC = get(stateFromC);
        return valueStateFromC.length;
    }
})

export default function TestB() {
    const valueFromA = useRecoilValue(stateFromA);

    const valueFromC = useRecoilValue(stateFromC);

    const countStateFromCLength = useRecoilValue(countStateFromC);

    console.log('组件B渲染了')

    return (<div className={styles.container}>
        <h3>这是B组件</h3>
        <div>
            <p>来自A的Atom ：{valueFromA}</p>
            <p>来自C的Atom ：{valueFromC}</p>

            <p>stateFromC的长度：{countStateFromCLength}</p>
        </div>
    </div>)
}
